<template>
  <div>
    <cus-modal ref="modal" title="添加菜肴" @on-visible-change="onVisibleChange" @onOk="onOk"
               width="820">
      <Form ref="formValidate" :model="form" :label-width="100" label-position="top">
        <FormItem label="早餐">
          <Tag color="success" v-for="(v, i) in mealMsg.morning" :key="i" @click.native="onAdd(v, i, 'morning')">{{ v.dishName }}</Tag>
        </FormItem>
        <br>
        <FormItem label="已选早餐">
          <Tag color="error" closable v-for="(v, i) in form.chooseList.morning" :key="i" @on-close="onDelete(v, i, 'morning')">{{ v.dishName }}</Tag>
        </FormItem>

        <FormItem label="中餐">
          <Tag color="success" v-for="(v, i) in mealMsg.centre" :key="i" @click.native="onAdd(v, i, 'centre')">{{ v.dishName }}</Tag>
        </FormItem>
        <br>
        <FormItem label="已选中餐">
          <Tag color="error" closable v-for="(v, i) in form.chooseList.centre" :key="i" @on-close="onDelete(v, i, 'centre')">{{ v.dishName }}</Tag>
        </FormItem>

        <FormItem label="晚餐">
          <Tag color="success" v-for="(v, i) in mealMsg.lateness" :key="i" @click.native="onAdd(v, i, 'lateness')">{{ v.dishName }}</Tag>
        </FormItem>
        <br>
        <FormItem label="已选晚餐">
          <Tag color="error" closable v-for="(v, i) in form.chooseList.lateness" :key="i" @on-close="onDelete(v, i, 'lateness')">{{ v.dishName }}</Tag>
        </FormItem>
      </Form>
      <div slot="footer">
        <div class="modal-footer">
          <cus-button size="small" class="mr_2" @onClick="onCancel">取消</cus-button>
          <cus-button type="primary" size="small" @onClick="onOk">{{form.id ? '编辑' : '添加'}}</cus-button>
        </div>
      </div>
      <Spin size="large" fix v-if="loading"></Spin>
    </cus-modal>
  </div>
</template>

<script>
import {getMealMsg} from '@/api/business/business'

const form = {
  date: '',
  mealPlanId: '',
  chooseList: {
    centre: [],
    lateness: [],
    morning: []
  }
}

export default {
  name: "addSupplier",
  data() {
    return {
      loading: false,
      form: form,
      mealMsg: {
        centre: [],
        lateness: [],
        morning: []
      }
    }
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      this.$refs['formValidate'].resetFields();
      if (!v) this.form = this.$cu.deepClone(form);
    },
    onCancel() {
      this.$refs['modal'].show = false;
    },
    show() {
      this.loading = false;
      this.$refs['modal'].show = true;
      this.loading = true;
      this.getMealMsgApi();
    },
    onAdd(v, i, key){
      this.form.chooseList[key].push(v)
      this.mealMsg[key].splice(i ,1);
    },
    onDelete(v, i, key) {
      this.form.chooseList[key].splice(i ,1);
      this.mealMsg[key].push(v)
    },
    onOk() {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          this.$parent.form.foodarray[0]['foodname'] = this.form.chooseList.morning;
          this.$parent.form.foodarray[1]['foodname'] = this.form.chooseList.centre;
          this.$parent.form.foodarray[2]['foodname'] = this.form.chooseList.lateness;
          this.$refs['modal'].show = false;
        }
      })
    },
    // 获取食谱详情
    getMealMsgApi() {
      return new Promise(resolve => {
        getMealMsg({
          date: this.form.date,
          mealPlanId: this.form.mealPlanId,
        }).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            res.data.morning = res.data.morning.filter(v => {
              return this.form.chooseList.morning.findIndex(val => v.dishListId == val.dishListId) != -1 ? false : true
            })

            res.data.centre = res.data.centre.filter(v => {
              return this.form.chooseList.centre.findIndex(val => v.dishListId == val.dishListId) != -1 ? false : true
            })

            res.data.lateness = res.data.lateness.filter(v => {
              return this.form.chooseList.lateness.findIndex(val => v.dishListId == val.dishListId) != -1 ? false : true
            })

            this.mealMsg = res.data;
          }
        })
      })
    },
  }
}
</script>

<style scoped lang="less">

</style>
